<template>
  <div class="table-component">
    <div class="table-container">
      <el-table
        :data="tableData"
        size="medium"
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{ textAlign: 'center' }"
      >
        <template v-for="(val, key) in cols">
          <template v-if="typeof val === 'string'">
            <af-table-column
              :key="key"
              :prop="key"
              :label="val"
            >
            </af-table-column>
          </template>
          <template v-else>
            <template v-if="val.custom">
              <af-table-column
                :key="key"
                :label="val.title ? val.title : 'null'"
              >
                <template slot-scope="scope">
                  <slot :name="key" :data="{index: scope.$index,data: scope.row}"></slot>
                </template>
              </af-table-column>
            </template>
            <template v-else>
              <af-table-column
                :key="key"
                :prop="key"
                :label="val.title ? val.title : 'null'"
              >
                <template slot-scope="scope">
                  {{getProp(key, val, scope.row)}}
                </template>
              </af-table-column>
            </template>
          </template>
        </template>
        
        <template v-if="showOperating">
          <af-table-column
            fixed="right"
            label="操作"
          >
            <template slot-scope="scope">
              <slot name="operating" :data="{index: scope.$index,data: scope.row}"></slot>
            </template>
          </af-table-column>
        </template>
        
      </el-table>
    </div>
    <br>
    <div class="table-pagination">
      <el-pagination
        @size-change="limitChange"
        @current-change="pageChange"
        :current-page="currentPage"
        :page-sizes="pageLimits"
        :page-size="pageLimits[0]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoanTable",
  props: {
    cols: {
      type: Object,
      default() {
        return {}
      }
    },
    tableData: {
      type: Array,
      default() {
        return []
      }
    },
    showOperating: {
      type: Boolean,
      default: true
    },
    pageLimits: {
      type: Array,
      default() {
        return [5, 10, 20, 30, 50, 100]
      }
    },
    total: {
      type: Number,
      default() {
        return 0
      }
    }
  },
  data() {
    return {
      currentPage: 1,
      pageLimit: this.pageLimits[0]
    }
  },
  methods: {
    pageChange(val) {
      this.currentPage = val;
      this.requestData();
    },
    limitChange(val) {
      this.pageLimit = val;
      this.requestData();
      // if(this.currentPage * this.pageLimit < this.total) this.requestData();
    },
    requestData() {
      this.$emit("requestData",this.currentPage,this.pageLimit);
    },
    //对于一级对象直接由table自获取数组中渲染对象的val，多级的情况下只能自行计算
    getProp(key, val, obj) {
      if(key && val && obj && typeof val === 'object' && val.addr) {
        let temp = obj[val.addr[0]];
        if(!temp) return "null";
        for (let i = 1; i < val.addr.length; i++) {
          temp = temp[val.addr[i]];
          if(!temp) return "null"
        }
        return temp[key]
      }
      return "null"
    }
  }
}
</script>

<style scoped>
  .table-container {
    text-align: center;
  }
  
  .table-pagination {
    text-align: center;
  }
</style>